<!--
    摄像头管理
 -->
<template>
    <div class="page">
        <div class="nuclein-query">
            <div>摄像头管理</div>
            <div style="margin-left: auto;">
                <el-button size="small" type="primary" @click="showDialog('bindEng')">添加摄像头</el-button>
            </div>
        </div>
        <div class="query">
            <el-form :ref="query" :form="query" :inline="true" label-width="6em">
                <el-form-item label="摄像头状态">
                    <el-select v-model="query.status" size="small" style="width: 120px">
                        <el-option :value="null" label="全部"></el-option>
                        <el-option v-for="item in monitoringStates" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label-width="0">
                    <el-button size="small" type="primary" @click="getList">查询</el-button>
                    <el-button size="small" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="content-row">
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column label="摄像头类型" prop="monitoringType" align="center" width="100">
                    <template slot-scope="scope">
                        {{ scope.row.monitoringType == 1 ? '单元机' : '围墙机' }}
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" label="摄像头名称" prop="monitoringName" align="center">
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" label="摄像头编号" prop="monitoringSn" align="center">
                </el-table-column>
                <!-- <el-table-column label="在线时长" prop="onlineTime" align="center">
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" label="最近在线时间" prop="sysTime" align="center">
                </el-table-column> -->
                <el-table-column label="楼栋信息" prop="position" align="center">
                </el-table-column>
                <el-table-column label="详情信息" align="center">
                    <template slot-scope="scope">
                        <el-popover placement="right" trigger="click">
                            <p>小区名称：{{ scope.row.monitoringName }}</p>
                            <p> 楼栋名称：{{ scope.row.alleyName }}</p>
                            <p>房号名称：{{ scope.row.buildingName }}</p>
                            <p>监控设备类型：{{ scope.row.doorMonitoringType }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">查看</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        <el-tag :type="judgeOnlineStatusType(scope.row.monitoringState).type">
                            {{ judgeOnlineStatusType(scope.row.monitoringState).label }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="160">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger"
                            @click="handleDelete(scope.row.monitoringId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="pagination-wrap">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[5, 10, 20, 30, 40]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <!--    表单 开始-->
        <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :title="dialogTitle"
            :visible.sync="dialogVisible" width="70%">
            <el-form ref="bindEngForm" :model="bindEngForm" :rules="rules" class="visitorForm" label-width="140px">
                <el-row>
                    <el-col :span="span">
                        <el-form-item label="摄像头类型" required>
                            <el-select v-model="bindEngForm.monitoringType" size="small">
                                <el-option v-for="item in deviceTypeList" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="摄像头状态" required>
                            <el-select v-model="bindEngForm.monitoringState" size="small">
                                <el-option v-for="(value, key) in monitoringStates" :key="value.label"
                                    :label="value.label" :value="value.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="span">
                        <el-form-item label="摄像头名称" prop="monitoringName"
                            :rules="{ required: true, message: '请输入摄像头名称' }" required>
                            <el-input v-model="bindEngForm.monitoringName" placeholder="请输入门禁机名称"
                                size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="小区" required>
                            <el-form-item :prop="'estateId'" :rules="{ required: true, message: '请选择小区' }">
                                <el-select v-model="bindEngForm.estateId" placeholder="小区" size="small"
                                    @change="estateChange(0, $event)">
                                    <el-option v-for="opt in estateList" :key="opt.label" :disabled="opt.disabled"
                                        :label="opt.label" :value="opt.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="楼栋">
                            <el-select v-model="bindEngForm.alleyId" placeholdder="楼栋" size="small"
                                @change="alleyChange(0, $event)">
                                <el-option v-for="opt in alleyList" :key="opt.value" :label="opt.label"
                                    :value="opt.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="房号">
                            <el-select v-model="bindEngForm.buildingId" placeholder="房号" size="small"
                                @change="buildingChange(0, $event)">
                                <el-option v-for="opt in buildingList" :key="opt.value" :disabled="opt.disabled"
                                    :label="opt.label" :value="opt.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item :prop="'monitoringSn'" :rules="{ required: true, message: '请输入唯一编号' }"
                            label="唯一编号">
                            <el-input v-model="bindEngForm.monitoringSn" placeholder="请输入唯一编号" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
        <!--    表单 结束-->
    </div>
</template>

<script>
import {
  getMonitoring, doorDeviceType, delMonitoring, saveMonitoring
  , estateAll, areaAll, alleyAll, buildingAll, floorAll
} from '../../api/api'
import commonFunction from '../../utils/commonFunction'
import commonDate from '../../utils/commonData'
const bindEngForm = {
  buildingId: '',
  alleyId: '',
  estateId: '',
  monitoringSn: '',
  monitoringName: '',
  monitoringType: '',
  doorDeviceType: '',
  monitoringState: ''

}
export default {
  data () {
    return {
      deviceTypeList: commonDate.deviceTypeList,
      deviceStatusList: commonDate.deviceStatusList,
      monitoringStates: commonDate.monitoringStates,
      total: 0,
      page: 1,
      limit: 5,
      // 搜索查询
      query: {
        monitoringState: null // -1离线状态  1在线
      },
      tableData: [],
      doorDeviceTypeList: [],

      // 表单数据
      dialogTitle: '',
      dialogVisible: false,
      showAdvanceConfig: false,
      bindEngForm: JSON.parse(JSON.stringify(bindEngForm)),
      installPositionList: commonDate.installPositionList,
      rules: commonDate.formRules,
      span: 10,
      facePreviewSize: '0|0',
      estateList: [], // 小区
      alleyList: [], // 街道
      buildingList: [], // 楼栋
      areaList: [], // 分区
      floorList: [], // 楼层
      roomList: [] // 房间
    }
  },
  created () {
    this.getestate()
    this.getEstateAll()
    setTimeout(() => {
      this.getList()
    }, 1);
  },
  methods: {
    // 获取/搜索
    getList () {
      const data = {
        page: this.page,
        limit: this.limit,
        ...this.query
      }
      getMonitoring({ ...data }).then(res => {
        if (res.code == 0) {
          this.tableData = res.list.records.map(item => {
            let refreshTimeForat
            let sysTime
            if (item.refreshTime) {
              refreshTimeForat = commonFunction.getTimeFormat(+new Date(item.onlineTime), 'YYYY-MM-DD hh:mm:ss')
              sysTime = commonFunction.getTimeFormat(+new Date(item.sysTime), 'YYYY-MM-DD hh:mm:ss')
            }
            return {
              ...item,
              refreshTimeForat,
              sysTime
            }
          })
          this.total = res.list.total
        }
      })
    },
    // 获取小区
    getEstateAll () {
      estateAll().then(res => {
        this.estateList = res.map(item => {
          const items = {
            label: item.estateName,
            id: item.estateId,
            value: item.estateId
          }
          return {
            ...items
          }
        })
      })
    },
    // 获取小区街道
    getAlleyList (index, value, alleyId) {
      const params = {
        estateId: value
      }
      alleyAll({ ...params }).then(res => {
        this.alleyList = []
        this.buildingList = []
        this.floorList = []
        this.roomList = []
        this.bindEngForm.alleyId = null
        res.map((val, index) => {
          this.alleyList.push({
            value: val.alleyId,
            label: val.alleyName
          })
          if (alleyId) {
            this.bindEngForm.alleyId = alleyId
          }
        })
      })
    },
    // 获取小区楼栋
    getBuildingList (index, value, buildingId) {
      const params = {
        alleyId: value
      }
      this.bindEngForm.buildingId = null
      buildingAll({ ...params }).then(res => {
        const buildingList = []
        res.map((val, index) => {
          buildingList.push({
            value: val.buildingId,
            label: val.buildingName
          })
        })
        this.buildingList = buildingList
        if (buildingId) {
          this.bindEngForm.buildingId = buildingId
        }
      })
    },
    estateChange (index, val) {
      this.getAllAreaList(val)
      this.getAlleyList(index, val)
      this.bindEngForm.estateName = commonFunction.getSelectedLabel(val, this.estateList)
      this.bindEngForm.alleyName = null
      this.bindEngForm.alleyId = null
      this.bindEngForm.buildingId = null
    },
    alleyChange (index, val) {
      this.getBuildingList(index, val)
      this.bindEngForm.alleyName = commonFunction.getSelectedLabel(val, this.alleyList)
      this.bindEngForm.buildingId = null
    },
    buildingChange (index, val) {
      this.getFloorList(index, val)
      this.bindEngForm.buildingName = commonFunction.getSelectedLabel(val, this.buildingList)
    },
    getAllAreaList (estateId, areaId) {
      areaAll({ estateId: estateId }).then(res => {
        this.areaList = res.list
        if (areaId) {
          this.bindEngForm.areaId = areaId
        }
      })
    },
    getFloorList (index, value, floorId) {
      const params = {
        buildingId: value
      }
      floorAll({ ...params }).then(res => {
        const list = []
        res.map((val, index) => {
          list.push({
            value: val.floorId,
            label: val.floorName
          })
        })
        this.floorList = list
        if (floorId) {
          this.bindEngForm.floorId = floorId
        }
      })
    },
    // 获取类型
    getestate () {
      doorDeviceType().then(res => {
        if (res.code == 0) {
          this.doorDeviceTypeList = res.list
        }
      })
    },
    // 重置
    handleReset () {
      this.limit = 10,
      this.page = 1,
      this.query = {
        deviceType: null,
        status: null,
        deviceId: null,
        lastLoginTime: null
      }
      this.getList()
    },

    // 确定提交
    save () {
      const that = this
      this.$refs.bindEngForm.validate((valid) => {
        if (valid) {
          const data = {
            monitoringId: this.bindEngForm.monitoringId ? this.bindEngForm.monitoringId : null,
            alleyId: this.bindEngForm.alleyId,
            buildingId: this.bindEngForm.buildingId,
            estateId: this.bindEngForm.estateId,
            monitoringName: this.bindEngForm.monitoringName,
            monitoringState: this.bindEngForm.monitoringState,
            monitoringType: this.bindEngForm.monitoringType,
            monitoringSn: this.bindEngForm.monitoringSn
          }
          saveMonitoring(data).then(res => {
            if (res.code == 0) {
              that.$message.success(data.monitoringId ? '编辑成功' : '添加成功')
              that.dialogVisible = false
              that.getList()
            } else {
              that.$message.error(res.msg)
            }
          })
        } else {
          return false
        }
      })
    },

    // 添加绑定
    showDialog (type, row) {
      this.dialogVisible = true
      this.bindEngForm = {
        buildingId: '',
        alleyId: '',
        estateId: '',
        monitoringSn: '',
        monitoringName: '',
        monitoringType: '',
        doorDeviceType: '',
        monitoringState: '',
        doorMonitoringType: ''
      }
    },
    // 编辑
    handleEdit (index, item) {
      this.dialogVisible = true
      if (this.bindEngForm.estateId) {
        this.getAlleyList(0, this.bindEngForm.estateId, item.alleyId)
      }
      if (this.bindEngForm.alleyId) {
        this.getBuildingList(0, this.bindEngForm.alleyId, item.buildingId)
      }
      if (this.bindEngForm.buildingId) {
        this.getFloorList(0, this.bindEngForm.buildingId, row.floorId)
      }
      this.bindEngForm = {
        monitoringId: item.monitoringId,
        buildingId: item.buildingId,
        alleyId: item.alleyId,
        estateId: item.estateId,
        monitoringSn: item.monitoringSn,
        monitoringName: item.monitoringName,
        monitoringType: parseInt(item.monitoringType),
        monitoringState: item.monitoringState
      }
    },
    // 删除当前行数据
    handleDelete (monitoringId) {
      const data = {
        monitoringId
      }
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delMonitoring(data).then(res => {
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() => {
      })
    },
    // 分页
    handleSizeChange (val) {
      this.limit = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.page = val
      this.getList()
    },
    judgeOnlineStatusType (estateId) {
      if (estateId === 2) {
        return { label: '离线', type: 'danger' }
      } else if (estateId === 1) {
        return { label: '在线', type: 'success' }
      } else {
        return { label: '未使用', type: 'warning' }
      }
    }
  }
}
</script>

<style scoped>
.page {
    position: relative;
    height: 100%;
}

.nuclein-query {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #DCDFE6;
}

.query {
    padding: 20px;
    padding-bottom: 0px;
}

.content-row {
    overflow: hidden;
}
</style>
